<template>
    <header>
        <div class="left">
            <img src="../../assets/logo-1.png"
                alt="">
            <span>
                猴小报信息发布管理系统
            </span>
        </div>
        <div class="right_user">
            <div class="left_msg">
                <el-popover placement="bottom"
                    :width="200"
                    trigger="hover"
                    :teleported="false"
                    popper-class="user_login_popper">
                    <template #reference>
                        <el-badge :value="count?count:''" :max="99" class="item">
                            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.ojV1EwtHrs1fGwM_mHsQowHaHa?w=166&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                                alt="" class="use_msg">
                        </el-badge>
                    </template>
                    <div class="order_information">
                    <a  target="_blank" v-for="(item,index) in list" :key="index">
                        {{ item.content }}
                    </a>
                </div>
                </el-popover>
            </div>
            <span class="line">
            </span>
            <div class="User_information">
                <el-avatar :icon="UserFilled" />
                <span>
                    {{ store.user_data.nickname }}
                </span>
                <div class="User_information_information">
                    <a href="http://info.maintain.bailingkeji.com/forgot">
                        <span></span> 修改密码
                    </a>
                    <a @click="login_out">
                        <span></span> 退出系统
                    </a>
                </div>
            </div>
        </div>
    </header>
</template>

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue'
import { loginOut } from '@/request/api/login.ts'
import { get_notice,get_notice_count } from "@/request/api/user.ts"
import Cookies from "js-cookie";
import { userInforStore } from "@/stores/user"
import { onMounted, ref ,onUnmounted} from 'vue';
const store = userInforStore()
const login_out = async () => {
    Cookies.remove("access_token")
    let data = await loginOut()
    location.reload()
}
let list: any = ref([])
let count = ref(0)
const get_list = async () => {
    let { data } = await get_notice({ type: 1 })
    console.log(data, "data");
    list.value = data.list
}
const get_list_num = async()=>{
  let {data} =await get_notice_count({ type: 1 })
  console.log(data, "data");
  count.value = data.count
}
let timer = setInterval(()=>{
    get_list_num()
},20000)
onUnmounted (()=>{
    clearInterval(timer) //销毁
})
onMounted(() => {
    get_list()
})
</script>

<style lang="scss" scoped>
header {
    display: flex;
    height: 70px;
    // width: 100%;
    background-color: rgba(24, 145, 255, 1);
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;

    .left {
        display: flex;
        align-items: center;

        img {
            width: 30px;
            border-radius: 50%;
        }

        span {
            @include font(#FFF, 18, 28);
            font-weight: 650;
            margin-left: 20px;
        }
    }

    .line {
        display: inline-block;
        height: 20px;
        width: 1px;
        background-color: #666;
        margin: 0 20px;
    }

    .right_user {
        display: flex;
        align-items: center;
        position: relative;
        :deep(.user_login_popper){
            padding: 0;
        }
        .order_information {
            background: #FFF;
            box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.24705882352941178);

            .order_information_msg {
                display: block;
                font-weight: 400;
                @include font(rgb(153, 153, 153), 12, 36);
                border-bottom: 1px solid rgb(228, 228, 228);
                padding-left: 15px;
                height: 45px;
            }

            a {
                display: block;
                height: 40px;
                padding-left: 15px;
                @include font(#333, 12, 36);
                border-bottom: 1px solid rgb(228, 228, 228);

                &:last-child {
                    border-bottom: none;
                }

                &:hover {
                    color: rgb(26, 188, 156);
                }
            }
        }

        .left_msg {
            height: 50px;
            display: flex;
            align-items: center;

            &:hover {
                .order_information {
                    display: block;
                }
            }
        }

        .use_msg {
            width: 17px;
            border-radius: 50%;
        }

        .msg_num {
            width: 20px;
            height: 20px;
            display: inline-block;
            border-radius: 50%;
            background-color: rgb(250, 94, 33);
            @include font(#FFF, 12, 20);
            text-align: center;
            position: absolute;
            top: 5px;
            left: 7px;
        }

        .User_information {
            display: flex;
            align-items: center;
            height: 50px;

            :deep(.el-avatar) {
                width: 30px;
                height: 30px;
                margin-right: 8px;
            }

            img {
                width: 30px;
                margin-right: 8px;
            }

            span {
                color: #FFF;
            }

            .User_information_information {
                position: absolute;
                right: -20px;
                top: 50px;
                width: 114px;
                height: 90px;
                background: #FFF;
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.24705882352941178);
                display: none;
                z-index: 5;

                a {
                    display: block;
                    text-align: center;
                    height: 40px;
                    @include font(#999, 13, 40);
                    cursor: pointer;

                    span {
                        color: #999999;
                    }

                    &:hover {
                        background-color: rgba(245, 245, 245, 1)
                    }
                }
            }

            &:hover {
                .User_information_information {
                    display: block;
                }
            }
        }
    }
}</style>